<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    background-color: black;
  }
</style>

<body>
  <script>
    setInterval(function () {
      var rain = document.createElement('div')
      rain.style.position = 'fixed'
      rain.style.height = '50px'
      rain.style.width = '2px'
      rain.style.filter = 'blue(1px)'
      rain.style.backgroundColor = 'white'
      rain.style.top = '0px'
      rain.style.left = Math.random() * 100 + '%'
      rain.style.opacity = parseInt(Math.random() * 10) / 10 + 'px'
      document.body.appendChild(rain);
      var timer = setInterval(function () {
        var height = parseInt(rain.style.top)
        var k = 1;
        ++k;
        rain.style.top = height + 5 * Math.pow(k, 2) + 'px'
        if (rain.style.top >= 900) {
          clearInterval(timer)
          rain.parentNode.removeChild(rain)
        }
      }, 5)
    }, 5)
  </script>
</body>

</html>